<template>
  <view class="tp-view-card">
    <view class="view-title-wrapper">
      <view class="time-wrapper">
        <ai-icon type="icon-time" color="var(--brand-2)"></ai-icon>
        <text class="range">{{times}}</text>
        <text class="range-tip" v-if="timesDesc">{{timesDesc}}</text>
      </view>
      <view class="time-wrapper-tip" v-if="hasDetail" @click="onDetailClick" ><ai-icon type="icon-more" :size="20" color="var(--gray-2)"></ai-icon></view>
    </view>
    <view class="place-title-wrapper" v-if="placeName">
      <view class="place-title">{{placeName}}</view>
      <view class="hot-box" v-if="hot > 0">
        <ai-icon type="icon-hot" color="var(--brand-2)"></ai-icon>
        <text class="hot-text" v-if="hot">{{hot}}</text>
      </view>
    </view>
    
    <view class="swiper-wrapper" v-if="images && images.length > 0">
      <tp-swiper :height="180" :images="images" :autoplay="false" @imgClick="onImgClick"></tp-swiper>
    </view>
    <view class="content" v-if="content">{{content}}</view>
    <view class="time-cost" v-if="timeCost"><text class="title">推荐游览时长：</text><text>{{timeCost}}</text></view>
    <view class="link-box" v-if="links && links.length > 0">
      <view class="link-title">{{linkTitle}}:</view>
      <view class="link-wrapper">
        <view class="link" v-for="(link, idx) in links" :key="idx" @click="onLinkClick(link)">{{link.text}}</view>
      </view>
    </view>
    <view class="bottom-box">
      <view class="tips-wrapper">
        <view class="tips" v-if="stars > 0">
          <uni-rate :value="stars" :readonly="true" :allow-half="true" :size="16" ></uni-rate>
          <text class="tip-item-text">{{stars}}分</text>
        </view>
        <view class="tips" v-if="budget">
          <ai-icon type="icon-budget" color="var(--brand-1)" :size="16"></ai-icon>
          <text class="tip-item-text">{{budget}}</text>
        </view>
      </view>
      <view class="detail-tip" v-if="hasDetail" @click="onDetailClick">
        <ai-icon type="icon-book" :size="14" color="var(--brand-2)"></ai-icon>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"tp-view-card",
    props: {
      placeId: String,
      placeName: String,
      placeType: String,
      times: String,
      timesDesc: String,
      timeCost: String,
      images: {
        type: Array,
        default: []
      },
      content: String,
      links: {
        type: Array,
        default: []
      },
      budget: String,
      stars: {
        type: Number,
        default: 0
      },
      hot: {
        type: [Number, String]
      }
    },
    data() {
      return {
        
      };
    },
    computed: {
      hasDetail() {
        return this.placeId
      },
      linkTitle() {
        let pt = this.placeType
        if (pt == 'sight') {
          return "附件的景点"
        } else if (pt == 'res') {
          return "附近的餐厅"
        } else if (pt == 'hotel') {
          return "附件的酒店"
        }
      }
    },
    methods: {
      onImgClick(e) {
        let url = this.getPlaceDetailUrl()
        url && uni.navigateTo({ url: url })
      },
      onLinkClick(e) {
        let placeId = e.key
        let url = this.getPlaceDetailUrl(placeId)
        url && uni.navigateTo({ url: url })
      },
      onDetailClick() {
        let url = this.getPlaceDetailUrl()
        url && uni.navigateTo({ url: url })
      },
      getPlaceDetailUrl(placeId) {
        if (!this.placeId) {
          return false
        }
        let pt = this.placeType
        let pid = placeId ? placeId : this.placeId
        if (pt == 'sight') {
          return `/pages/plan/sight?placeId=${pid}&placeType=${pt}`
        } else if (pt == 'res') {
          return `/pages/plan/restaurant?placeId=${pid}&placeType=${pt}`
        } else if (pt == 'hotel') {
          return `/pages/plan/hotel?placeId=${pid}&placeType=${pt}`
        }
      }
    }
  }
</script>

<style lang="scss">
@import "@/styles/_var.scss";

.tp-view-card {
  overflow: hidden;
  background: $card-bg;
  border-radius: $card-border-radius;
  box-shadow: var(--shadow-2);
  padding: $card-padding;
  
  .view-title-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: $gutter * 0.5;
    
    .time-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      
      .range,.range-tip {
        padding-left: 6px;
      }
    }
    .time-wrapper-tip {
      cursor: pointer;
    }
  }
  .place-title-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: $gutter * 0.5;
    .place-title {
      font-size: $font-size-md;
      font-weight: $font-weight-bold;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      max-width: 220px;
    }
    .hot-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      .hot-text {
        padding-left: 4px;
        color: var(--gray-2);
      }
    }
  }
  

  .swiper-wrapper {
    border-radius: $border-radius-md;
    overflow: hidden;
  }
  
  .content {
    color: var(--gray-2);
    line-height: 1.4;
    padding-top: $gutter;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  
  .time-cost {
    padding-top: $gutter * 0.5;
    color: var(--gray-2);
    display: flex;
    flex-direction: row;
    align-items: center;
    .title {
      font-size: $font-size-sm;
      font-weight: $font-weight-bold;
      color: var(--gray-3);
    }
  }
  
  .link-box {
    padding-top: $gutter * 0.5;
  }
  
  .link-title {
    color: var(--gray-3);
    font-size: $font-size-sm;
    font-weight: $font-weight-bold;
  }
  
  .link-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: $gutter * 0.3;
    
    .link {
      display: inline-block;
      position: relative;
      margin: 2px;
      padding: 2px 6px;
      border: 1px solid var(--brand-2);
      border-radius: 4px;
      color: var(--brand-2);
      font-size: $font-size-sm;
      line-height: 1.25;
      white-space: nowrap;
      cursor: pointer;
    }
  }
  .bottom-box {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    .time-wrapper {
      display: flex;
      flex-direction: column;
      flex: 1
    }
    .detail-tip {
      height: 24px;
      width: 24px;
      line-height: 24px;
      display: flex;
      align-items: center;
      border-radius: 50%;
      background-color: var(--brand-3);
    }
  }
  .tips {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: $gutter;
    align-items: center;
    
    .tip-item-text {
      padding-left: 6px;
      font-size: $font-size-sm;
      color: var(--gray-3);
    }
  }
}
</style>